<template>
  <div>
    <div class="title">
      <auth-title @sendBack="$router.back()" text="我的收藏"></auth-title>
    </div>
    <ul>
      <!-- <li class="list-oneImg">
        <div class="content-left">
          <p>林志玲穿透视黑纱裙米兰看秀腹部微隆显孕味</p>
          <div class="left-news">
            <span>火星时报</span>
            <i>52<span>跟帖</span></i>
          </div>
        </div>
        <img class="list-img" src="@/assets/img/u15.jpg" alt="">
      </li> -->
      <li v-for="(item, index) in listArray" :key="index">
        <div v-if="item.cover.length == 1" class="list-oneImg">
          <div class="content-left">
            <p>{{item.title}}</p>
            <div class="left-news">
              <span>{{item.user.nickname}}</span>
              <i>52<span>跟帖</span></i>
            </div>
          </div>
          <img v-for="(itemImg, indexImg) in item.cover" :key="indexImg" class="list-oneimg" :src="itemImg.url" >
        </div>
        <div v-else class="list-moreImg">
          <p>{{item.title}}</p>
          <div class="content-imgs">
            <img v-for="(itemImg, indexImg) in item.cover" :key="indexImg" :src="itemImg.url" alt="">
          </div>
          <div class="left-news">
            <span>{{item.user.nickname}}</span>
            <i>52<span>跟帖</span></i>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import authTitle from '@/commonComponent/authTitle.vue'
import mycollectionApi from '@/api/mycollection'

export default {
  data() {
    return {
      listArray: []
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    getListData() {
      mycollectionApi.getListData().then(res => {
        let resp = res.data
        console.log(resp.data);
        this.listArray = resp.data

        this.listArray.forEach(item => {
          if(item.cover){
            item.cover.forEach(item => {
              if(item.url.indexOf('http') < 0){
                item.url = this.$axios.defaults.baseURL + item.url
              }
            })
          }
        })
      })
    }
  },
  components: {
    authTitle
  }
}
</script>

<style scoped>
ul {
  margin-top: 5vw;
}
li {
  border-bottom: 1px solid #e4e4e4;
}
.list-oneImg {
  display: flex;
  justify-content: space-between;
  padding: 4vw 4vw;
  /* border-bottom: 1px solid #e4e4e4; */
}
.list-oneImg .list-oneimg {
  width: 33vw;
  height: 24vw;
}
.content-left {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.content-left p {
  font-size: 4.1vw;
  color: #333333;
  padding: 0.8vw 2vw 0 0;
  line-height: 6vw;
}
li .left-news {
  padding-bottom: 1vw;
}
li .left-news i {
  padding-left: 5vw;
}
.list-moreImg {
  padding: 4vw 2.5vw 4vw 4vw;
  /* border-bottom: 1px solid #e4e4e4; */
}
.list-moreImg p {
  display: flex;
  font-size: 4.1vw;
  color: #333333;
  line-height: 6vw;
  height: 10vw;
}
.content-imgs {
  margin-top: 1vw;
  margin-bottom: 3vw;
}
.content-imgs img {
  width: 32%;
  margin-right: 1px;
}
</style>
